<template>
    <div>
<!--        <el-row style="display: flex; height: 60px;line-height: 60px;border: solid 1px #e6e6e6;">
            <div style="width: 140px;text-align: center">
                <img src="@/assets/logo.png" style="width: 30px; position: relative; top: 5px;">
                <span style="margin-left: 5px">前台页面</span>
            </div>
            <ul style="flex: 1;background-color:blanchedalmond">
                <li class="item"><a href="/login">菜单一</a></li>
                <li class="item">菜单二</li>
            </ul>

            <div style="width: 120px;text-align: center">
                <div v-if="!user.username">
                    <el-button>
                        <router-link to="/login">登录</router-link>
                    </el-button>
                </div>
                <div v-else>
                    <el-dropdown style="cursor: pointer;">
                        <div style="height: 60px;margin: auto 5px">
                            <el-avatar style="flex: 1;margin: 10px 0;position: relative" :size="40" fit="contain"
                                       @error="errorHandler"
                                       alt="头像">
                                <img :src="user.avatar">
                            </el-avatar>
                            <i class="el-icon-arrow-down"></i>
                        </div>

                        <el-dropdown-menu style="text-align: center;">
                            <div style="width: 150px;height: auto;">
                                <el-dropdown-item style="font-size: 14px;padding: 5px 0">
                                    <span>{{user.nickname}}</span>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <router-link to="/front/person" style="text-decoration-line: none;color: black">个人信息
                                    </router-link>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    &lt;!&ndash;<router-link to="/login" style="text-decoration-line: none">退出</router-link>&ndash;&gt;
                                    <span @click="logout">退出</span>
                                </el-dropdown-item>
                            </div>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </el-row>-->

        <el-row style="display: flex; height: 62px;line-height: 62px;border: solid 1px #e6e6e6;">
            <el-col :span="3">
                <div style="width: 140px;text-align: center"><img src="@/assets/logo.png"
                                                                  style="width: 30px; position: relative; top: 5px;">
                    前台系统
                </div>
            </el-col>
            <el-col :span="19" style="flex: 1">
                <el-menu mode="horizontal" @select="handleSelect" router>
                    <el-menu-item index="/front/home">首页</el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">我的工作台</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                        <el-menu-item index="2-3">选项3</el-menu-item>
                        <el-submenu index="2-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="2-4-1">选项1</el-menu-item>
                            <el-menu-item index="2-4-2">选项2</el-menu-item>
                            <el-menu-item index="2-4-3">选项3</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="3" disabled>消息中心</el-menu-item>
                    <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="2">
                <div style="width: 120px;text-align: center;">
                    <div v-if="!user.username">
                        <el-button>
                            <router-link to="/login">登录</router-link>
                        </el-button>
                    </div>
                    <div v-else>
                        <el-dropdown style="cursor: pointer;">
                            <div style="height: 60px;margin: auto 5px">
                                <el-avatar style="flex: 1;margin: 10px 0;position: relative" :size="40" fit="contain"
                                           @error="errorHandler"
                                           alt="头像">
                                    <img :src="user.avatar">
                                </el-avatar>
                                <i class="el-icon-arrow-down"></i>
                            </div>

                            <el-dropdown-menu style="text-align: center;">
                                <div style="width: 150px;height: auto;">
                                    <el-dropdown-item style="font-size: 14px;padding: 5px 0">
                                        <span>{{user.nickname}}</span>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <router-link to="/front/person" style="text-decoration-line: none;color: black">
                                            个人信息
                                        </router-link>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <!--<router-link to="/login" style="text-decoration-line: none">退出</router-link>-->
                                        <span @click="logout">退出</span>
                                    </el-dropdown-item>
                                </div>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
                <!--<el-button>登录</el-button>
                <el-button>注册</el-button>-->
            </el-col>
        </el-row>
        <div style="display: flex;justify-content: center;">
            <div style="background-color: white;width: 1300px;position: absolute">

                <router-view/>
            </div>
        </div>

    </div>
</template>

<script>
    import Home from "./Home";

    export default {
        name: "Front",
        components: {
            Home
        },
        data() {
            return {
                user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},

            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            logout() {
                this.$message.success("退出成功");
                this.$store.commit("logout");
            },
            errorHandler() {
                return true
            }
        }
    }
</script>


<style>
    a {
        text-decoration-line: none;
        color: black;
    }

    .item {
        display: inline-block;
        width: 120px;
        text-align: center;
        cursor: pointer;
    }

    .item:hover {
        background-color: #d9d9d9;
    }
</style>